<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { Bug, Database, World, Send,Eraser } from '@vicons/tabler'
import InputEditor from '@/views/LLMStudio2/components/InputEditor/index.vue'
import ModelSelector from '@/views/LLMStudio2/ChatModelPanel/ChatInterface/prompt-editor/ModelSelector.vue'
import ModelSetting from '@/views/LLMStudio2/ChatModelPanel/ChatInterface/prompt-editor/ModelSetting.vue'
import CustomButton from '@/components/CustomButton.vue'
import { getLLMModels } from '@/service/api/llmModels'

interface Props {
  isNetSearch: boolean
  currentModel: number
}

const props = withDefaults(defineProps<Props>(), {
  isNetSearch: false
})

const emit = defineEmits<{
  (e: 'update:currentModel', value: number): void
  (e: 'update:isNetSearch', value: boolean): void
  (e: 'send', value: string): void
  (e: 'newChat'): void
}>()

const isNetSearchValue = computed({
  get: () => props.isNetSearch,
  set: (value: boolean) => emit('update:isNetSearch', value)
})

// 可拖动高度
const height = ref(250)
const pageHeight = ref(0)
const isDragging = ref(false)
const startY = ref(0)
const startHeight = ref(0)

const handleMouseDown = (e: MouseEvent) => {
  isDragging.value = true
  startY.value = e.clientY
  startHeight.value = height.value
  document.addEventListener('mousemove', handleMouseMove)
  document.addEventListener('mouseup', handleMouseUp)
}

const handleMouseMove = (e: MouseEvent) => {
  if (!isDragging.value) return
  const deltaY = startY.value - e.clientY
  var maxHeight = pageHeight.value - 200
  height.value = Math.max(100, Math.min(maxHeight, startHeight.value + deltaY))
}

const handleMouseUp = () => {
  isDragging.value = false
  document.removeEventListener('mousemove', handleMouseMove)
  document.removeEventListener('mouseup', handleMouseUp)
}

// 设置面板
const settings = reactive({
  maxHistory: 8,
  maxTokens: 4098,
  temperature: 0.6,
  presencePenalty: 0.0,
  frequencyPenalty: 0.0,
  repetitionPenalty: 1.0,
  topP: 1.0,
  topK: 5
})

const models = ref([])

const currentModelVal = computed({
  get: () => props.currentModel,
  set: (newModel: number) => {
    emit('update:currentModel', newModel)
  }
})

// 移除未使用的变量
// const content = ref('')

const send = (message: string) => {
  emit('send', message)
}

onMounted(async () => {
  pageHeight.value = document.documentElement.clientHeight
  // resize
  window.addEventListener('resize', () => {
    pageHeight.value = document.documentElement.clientHeight
  })
  await getModels()
})
const getModels = async () => {
  try {
    const response = await getLLMModels()
    models.value = response.data.map((model: any) => ({
      id: model.id,
      name: model.name,
      logo: model.logo,
      title: model.title
    }))
  } catch (error) {
    console.error('获取模型列表失败:', error)
  }
}

const handleNewChat = () => {
  emit('newChat')
}

</script>

<template>
  <div class="w-full rounded-xl relative flex flex-col border border-t-solid border-t-[#adb5bd55]">
    <div
      class="flex items-center justify-center rounded-2xl cursor-ns-resize absolute top-0 left-0 right-0"
      @mousedown="handleMouseDown"
    >
      <div class="w-25px h-4px bg-gray-200 rounded-full"></div>
    </div>

    <div class="w-full rounded-md flex justify-between items-center p-2 pt-0">
      <div class="flex items-center gap-4px">
        <ModelSelector :models="models" v-model:currentModel="currentModelVal" />
        <n-tooltip raw :show-arrow="false">
          <template #trigger>
            <CustomButton bgColor="">
              <template #icon>
                <n-icon size="20" :component="Database"></n-icon>
              </template>
            </CustomButton>
          </template>
          <span class="px-3 py-2 text-black text-lg font-medium bg-white rounded-md">已关联0个数据集</span>
        </n-tooltip>
        <n-tooltip raw :show-arrow="false">
          <template #trigger>
            <CustomButton @click="isNetSearchValue = !isNetSearchValue" 
              :textColor="isNetSearchValue ? 'text-blue' : 'text-gray-700'"
              bgColor=""
              
            >
              <template #icon>
                <n-icon size="20" :component="World"></n-icon>
              </template>
            </CustomButton>
          </template>
          <span class="px-3 py-2 text-black text-lg font-medium bg-white rounded-md">{{ isNetSearchValue ? '网络搜索已开启' : '网络搜索已关闭' }}</span>
        </n-tooltip>
        <ModelSetting v-model:settings="settings" />
      </div>
      <div class="flex items-center gap-5px text-#444CE7 cursor-pointer">
        <n-tooltip raw :show-arrow="false">
          <template #trigger>
            <CustomButton bgColor="">
              <template #icon>
            <n-icon size="20" :component="Eraser"></n-icon>
              </template>
            </CustomButton>
          </template>
          <span class="px-3 py-2 text-black text-lg font-medium bg-white rounded-md">清空聊天记录</span>
        </n-tooltip>
      </div>
    </div>

    <n-scrollbar class="w-full h-full" :style="{ height: `${height}px` }">
      <InputEditor
        :height="height"
        @send="send"
        @newChat="handleNewChat"
      >
      </InputEditor>
    </n-scrollbar>

    <div class="w-full rounded-b-2xl flex justify-between items-end bg-white">
      <div
        class="flex items-center justify-center bg-gray-100 px-10px rounded-2xl mb-5px ml-5px cursor-ew-resize text-10px text-gray-400"
      >
        0
      </div>
      <div class="w-50px"></div>
    </div>
    <!-- 按↩︎ Enter发送 \n ctrl+Enter换行 -->

  </div>
</template>

<style lang="scss" scoped>
.monaco-editor-container {
  border-radius: 10px;
}

.cursor-ew-resize {
  cursor: ew-resize;
}

.cursor-ns-resize {
  cursor: ns-resize;
}
</style>
